<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="plan/view-plan-order.html">
<link rel="import" href="plan/view-plan-scheduling.html">
<link rel="import" href="plan/view-plan-production.html">
<link rel="import" href="view-app.html">
<link rel="import" href="style/shared-styles.html">
<dom-module id="view-plan">
  <script>
    /**
     * # Plan
     * `<view-plan>` show the plan of your factory.
     * @ViewPlan
     * @polymer 
     * @extends {Polymer.Element}
     */
    class ViewPlan extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],Polymer.Element) {
      static get is() {
        return 'view-plan'
      }

      static get template() {
        return Polymer.html`
          <style include="shared-styles">
            :host {
             display: block;
           }
         </style>
         <app-localstorage-document key="app-lang" data="{{language}}"></app-localstorage-document>
         <app-header id="subheader" slot="header" shadow>
           <paper-tabs selected="{{tabs}}" attr-for-selected="name" role="navigation" autoselect noink>
             <template is="dom-repeat" items="[[submenus]]">
               <paper-tab link role="tab" name$="[[item.view]]" disabled="[[item.disable]]">
                 <a href="app/plan/[[item.view]]" tabindex="-1">
                 <paper-icon-button icon="[[item.icon]]" alt="[[item.title]]"></paper-icon-button>
                 <span class="tab-title">{{localize(item.title)}}</span>
                 </a>
               </paper-tab>
             </template>
           </paper-tabs>
         </app-header>
         <iron-pages selected="[[tabs]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
           <view-plan-order name="order"></view-plan-order>
           <view-plan-scheduling name="scheduling"></view-plan-scheduling>
           <view-plan-production name="production"></view-plan-production>
         </iron-pages>
        `
      }

      static get properties() {
        return {
          route: String,
          language: String,
          tabs: {
            type: String,
            reflectToAttribute: true,
            value: 'order',
            observer: '_tabsChanged'
          },
          submenus: {
            type: Array,
            value: () => {
              return [{
                "title": "order",
                "view": "order",
                "icon": "vaadin:list-ol",
                "disable": false
              },
              {
                "title": "scheduling",
                "view": "scheduling",
                "icon": "vaadin:calendar",
                "disable": false
              }
              // {
              //   "title": "production",
              //   "view": "production",
              //   "icon": "vaadin:start-cog",
              //   "disable": false
              // }
              ]
            }
          }
        }
      }

      _tabsChanged(tabs) {
        const resolvedTabsUrl = this.resolveUrl('plan/view-plan-' + tabs + '.html')
        Polymer.importHref(resolvedTabsUrl, null, null, true)
      }

      connectedCallback() {
        super.connectedCallback()
        this.loadResources(this.resolveUrl('../data/locales.json'))

      }
    }
    window.customElements.define(ViewPlan.is, ViewPlan)
  </script>
</dom-module>